<template>
  <div id="balance">
    <div class="login-head">
      <span @click="jumpFn()" style="color: #fff">
        <van-icon name="arrow-left"
      /></span>
      <span class="login-title">我的积分</span>
      <span></span>
    </div>

    <div class="balance-content">
      <div class="balance-money">
        <div class="monet-firstList">
          <p>当前积分</p>
          <p @click="moveRight()">积分说明</p>
        </div>
        <div class="money">
          <input type="text" value="0" />
          <span>分</span>
        </div>
        <div class="subTx">
          <van-button
            type="danger"
            style="width: 100%; margin-top: 0.6216rem"
            >积分兑换商品</van-button
          >
        </div>
      </div>
      <router-view class="animated fadeInRightBig"></router-view>
    </div>
    
    <p class="transaction-details">交易明细</p>
    <div class="balance-bottom">
      <img src="../assets/deltailV.png" alt="" />
      <p>最近30天暂无积分记录</p>
      <p>快去下单赚取积分吧</p>
    </div>
   
  </div>
</template>

<script>
export default {
  name: "integral",

  data() {
    return {
      moneyAll: "321321",
      show: false,
    };
  },
  mounted() {},
  methods: {
    showPopup() {
      this.show = true;
    },
    jumpFn() {
      this.$store.commit("changeMoney", this.moneyAll);
      this.$router.push({
        name: "myVal",
      });
    },
    moveRight(){
        this.$store.commit("detailTz")
        this.$router.push({
            name:"detail"
        })
    }
  },
};
</script>
<style scoped>
.login-head {
  width: 100%;
  height: 1.2576rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0092e8;
}
.login-title {
  color: white;
  position: relative;
  left: -0.5405rem;
  font-size: 0.5405rem;
}
.balance-content {
  width: 100%;
  height: 4.6486rem;
  background-color: #0092e8;
  display: flex;
  justify-content: center;
  align-items: center;
}
.transaction-details {
  width: 100%;
  padding-left: 0.4054rem;
  color: #ccc;
  box-sizing: border-box;
  font-size: 0.3784rem;
  margin-top: 0.2703rem;
}
.balance-money {
  width: 95%;
  background-color: #fff;
  height: 91%;
  border-radius: 0.1351rem;
  padding: 0.2432rem;
  box-sizing: border-box;
}
.monet-firstList {
  display: flex;
  justify-content: space-between;
  font-size: 0.3514rem;
}
.monet-firstList > p:nth-child(1) {
  color: black;
}
.money > input {
  width: 5.4054rem;
  height: 1.4054rem;
  border: none;
  outline: none;
  font-size: 1.1351rem;
  color: black;
  font-weight: normal;
}
.money > span {
  color: black;
  font-size: 0.4459rem;
}
.balance-bottom {
  margin: 0 auto;
  text-align: center;
}
.balance-bottom img {
  width: 5.0541rem;
  height: 3.1622rem;
}
.balance-bottom p {
  font-size: 0.4324rem;
  color: #ccc;
}
.domeShow {
  width: 100%;
  height: 1.3514rem;
  background-color: #0092e8;
}

</style>